import styles from "./styles.module.scss";
import { ReactComponent as ArrowTopIcon } from "assets/icons/icon-arrow-top.svg";
import { useNavigate } from "react-router-dom";

interface Props {
  content: string;
  setSearchContent: (content: string) => void;
  focus: () => void;
}

// 最近搜索内容组件
export default function SearchItem({
  content,
  setSearchContent,
  focus,
}: Props) {
  const navigate = useNavigate();

  return (
    <div className={styles.item} onClick={() => {
      navigate(`/search/content?q=${content}`);
    }}>
      <div className={styles.content}>{content}</div>
      <ArrowTopIcon
        fill="#666666"
        onClick={() => {
          setSearchContent(content);
          focus();
        }}
      />
    </div>
  );
}
